<template>
  <div class="main" style="width: 100%;height: 100%">
    <div v-if="shiftFlng" id="fold" class="fold" style="font-size: 50px;display: none;position: fixed;left: 0px;z-index: 99" @click="menuBarShift">
      <el-button type="button" icon="el-icon-s-fold" style="font-size: 20px;"></el-button>
    </div>
    <div v-else id="foldFlng" class="fold" style="font-size: 50px;display: none;position: fixed;left: 270px;z-index: 99" @click="menuBarFlng">
      <el-button type="button" icon="el-icon-s-unfold" style="font-size: 20px;"></el-button>
    </div>
    <menu-bar ref="menu"></menu-bar>
    <router-view></router-view>
  </div>
</template>

<script>
import MenuBar from '../../components/menu/MenuBar'
import {Icon,Button,Main} from 'element-ui'
export default {
  name: 'Home',
  components: {
    MenuBar,
    ElIcon:Icon,
    ElButton:Button,
    ElMain:Main
  },
  data(){
    return{
      shiftFlng:true
    }
  },
  methods:{
    menuBarShift(){
      this.shiftFlng=false
      this.$refs.menu.mentFalse()
    },
    menuBarFlng(){
      this.shiftFlng=true
      this.$refs.menu.menuTrue()
    }
  }
}
</script>

<style scoped>

</style>
